<template>
	<view style="padding: 40rpx;">

		<view class="brand">

			<view class="item">
				款式:{{clothesName}}-{{clothesEncode}}
			</view>


			<view class="item">
				<view>选择颜色</view>
				<u-checkbox-group placement="column" v-model="checkboxValue1" @change="checkboxChange">
					<u-checkbox labelSize="20" :customStyle="{margin: '15rpx'}" v-for="(item, index) in color" :key="index" :label="item.colorName"
					 :name="item.colorName">
					</u-checkbox>
				</u-checkbox-group>
			</view>


			<view class="item">
				<view>选择尺码</view>
				<view>
					<u-checkbox-group placement="column" v-model="checkboxValue2" @change="checkboxChange2">
						<u-checkbox labelSize="25" :customStyle="{margin: '15rpx'}" v-for="(item, index) in size" :key="index" :label="item.sizeName"
						 :name="item.sizeName">
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>

		</view>

		<view class="bt">
			<u-button type="primary" @click="dealSize()">第一步 生成表格</u-button>
		</view>


		<view class="organizationDetails">
			<!-- 内容区 -->
			<view class="table-content">
				<table ref="table" class="table">
					<!-- 表头 -->
					<thead>
						<tr class="top">
							<th v-for="(item_th, index_th) in pop" :key="index_th" :style="{background: item_th.backgroundColor }">
								<!-- 	<span class="title">{{ item_th.title }}</span> -->
							</th>
						</tr>
					</thead>

					<!--展示列表数据 -->

					<tbody v-for="item1 in colorList2">
						<tr v-for="(item2,index) in item1.sizeDtos">

							<td>{{ item1.colorName }} {{ item2.sizeName }}</td>
							<!-- <td ></td> -->
							<td>
								<view style="margin: 10px;">
									<u-number-box :min="0" v-model="item2.mount"></u-number-box>
								</view>
							</td>
						</tr>


					</tbody>
				</table>
			</view>

		</view>

		<view class="bt">
			<u-button type="primary" @click="newTask()"> 第二步 生成菲码</u-button>
		</view>

<u-toast ref="uToast"></u-toast>


	</view>
</template>

<script>
	export default {
		onLoad: function(options) {
			var that = this
			this.api.get("/clothes/sizeAndColor", {}).then(res => {
				that.size = res.data.sizes
				that.color = res.data.colors
				console.log(res);
			})
			this.id = options.id
			this.clothesName = options.clothesName
			this.clothesEncode = options.clothesEncode
			console.log(options)
		},
		data() {
			return {
				id: "",
				clothesEncode: "",
				clothesName: "",
				checkboxValue1: [], //筛选的颜色
				checkboxValue2: [], //赛选的尺码
				// 基本案列数据
				size: [{
						name: 'x',
						disabled: false
					},
					{
						name: 'm',
						disabled: false
					},
					{
						name: 'l',
						disabled: false
					},
					{
						name: 'xl',
						disabled: false
					},
					{
						name: 'xxl',
						disabled: false
					}
				],

				pop: [{
						title: '颜色',

					},
					{
						title: '尺码',
					},
					{
						title: '数量',
					}

				],

				color: [{
						name: '黑色',
						disabled: false
					},
					{
						name: '白色',
						disabled: false
					},
					{
						name: '灰色',
						disabled: false
					},
					{
						name: '红色',
						disabled: false
					},
				],
				colorList2: [
					/* 	// {
						// 	title: '白色',
						// 	sizeList: [
						// 		{
						// 			title: 'm',
						// 			mount: 1
						// 		},
						// 		{
						// 			title: 'l',
						// 			mount: 1
						// 		},
						// 		{
						// 			title: 'xl',
						// 			mount: 1
						// 		},
						// 		{
						// 			title: 'xl',
						// 			mount: 1
						// 		},
						// 		{
						// 			title: 'xxl',
						// 			mount: 1
						// 		},
						// 	],
						// },
						// {
						// 	title: '灰色',
						// 	sizeList: [
						// 		{
						// 			title: 'm',
						// 			mount: 1
						// 		},
						// 		{
						// 			title: 'l',
						// 			mount: 1
						// 		},
						// 		{
						// 			title: 'xl',
						// 			mount: 1
						// 		},
						// 		{
						// 			title: 'xl',
						// 			mount: 1
						// 		},
						// 		{
						// 			title: 'xxl',
						// 			mount: 1
						// 		},
						// 	],
						// },
						// {
						// 	title: '红色',
						// 	sizeList: [
						// 		{
						// 			title: 'm',
						// 			mount: 1
						// 		},
						// 		{
						// 			title: 'l',
						// 			mount: 1
						// 		},
						// 		{
						// 			title: 'xl',
						// 			mount: 1
						// 		},
						// 		{
						// 			title: 'xl',
						// 			mount: 1
						// 		},
						// 		{
						// 			title: 'xxl',
						// 			mount: 1
						// 		},
						// 	],
						// },
						// {
						// 	title: '黑色',
						// 	sizeList: [
						// 		{
						// 			title: 'm',
						// 			mount: 1
						// 		},
						// 		{
						// 			title: 'l',
						// 			mount: 1
						// 		},
						// 		{
						// 			title: 'xl',
						// 			mount: 1
						// 		},
						// 		{
						// 			title: 'xl',
						// 			mount: 1
						// 		},
						// 		{
						// 			title: 'xxl',
						// 			mount: 1
						// 		},
						// 	],
						// }, */
				],
			}
		},

		methods: {
			dealSize() {

				var newList = []
				for (var i = 0; i < this.checkboxValue1.length; i++) {
					//颜色数据
					var sizeDtos = []
					for (var j = 0; j < this.checkboxValue2.length; j++) {
						//尺码
						var sizeId = ""
						for (var s = 0; s < this.size.length; s++) {
							if (this.size[s].sizeName == this.checkboxValue2[j]) {
								sizeId = this.size[s].id
							}
						}
						var item2 = {
							"sizeId": sizeId,
							"sizeName": this.checkboxValue2[j],
							"mount": 0
						}
						sizeDtos.push(item2)
					}
					var colorId = ""
					for (var m = 0; m < this.color.length; m++) {
						if (this.color[m].colorName == this.checkboxValue1[i]) {
							colorId = this.color[m].id
						}
					}
					var data = {
						"colorName": this.checkboxValue1[i],
						"colorId": colorId,
						sizeDtos
					}
					newList.push(data)
				}
				console.log(newList)
				this.colorList2 = newList

			},
			checkboxChange(n) {
				console.log('change', n);
			},
			checkboxChange2(n) {
				console.log('change', n);
			},
			change(e) {
				console.log('change', e);
			},
			newTask() {
				var that = this
				this.api.post("/clothes/newTask", {
					companyId: that.$store.state.myCompanyId,
					clothesId: that.id,
					colorsDtos: that.colorList2

				}).then(res => {
					console.log(res);

					that.$refs.uToast.show({
						type: 'success',
						title: '提示',
						message: "操作成功",
					})

					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						}); // 返回上一页
					}, 1500)
				})
			}
		},
		computed: {


		},

	}
</script>

<style scoped lang="scss">
	// 控制高度
	// 正常高度
	.brand {
		box-shadow: 0 0 20upx rgba(0, 0, 0, 0.15);
		border-radius: 10rpx;
	}

	.item {
		margin: 26rpx;
		font-weight: 550;
		font-size: 35rpx;

	}

	.normalHeight {
		height: 100%;
		transition: 0.3s;
	}

	// 头部
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 10px;
		height: 40px;
	}

	// 表格相关样式
	table {
		border-collapse: collapse;
		width: 98%;
		margin: 0 auto;
		text-align: center;
		font-size: 40rpx;
		font-weight: 600;


		// 每一行下面加边框
		tr {
			width: 100%;
			table-layout: fixed;
		}

		tbody {
			height: 500rpx;
			display: table-row;
		}

		tbody tr {
			display: flex;
			justify-content: space-between;
		}

		.cont {
			height: 40px;
		}
	}



	// 表头设置
	.top {
		height: 40px;
		line-height: 40px;
		background: rgb(242, 245, 247);

		display: flex;
		justify-content: space-around;
		width: 100%;
		table-layout: fixed;

		.title {
			margin-right: 3px;
		}

		th {
			border-left: 1px solid #e9ebec;
			font-weight: 500;
		}
	}

	// 合计一行高亮显示
	.sum {
		color: #005dff;
		font-weight: bold;
	}


	.bt {
		width: 90%;
		margin: 20rpx auto;
	}
</style>
